import React, { useState } from 'react'
import { Button, Form, DatePicker, Select, Table, Input, Row, Col, Modal, message, Menu, Spin, Badge } from 'antd';
import request from '@/http';
import { EditObject, Edit } from './Edit';
const { Option } = Select;
const { confirm } = Modal;


export default function index() {
    const [formObject] = Form.useForm();//获取数据

    
    const [currentEditObject, setCurrentEditObject] =
    React.useState<EditObject>({
      isModalVisible: false,
    });


    const tableTitle:any[]=[//数据表头
        {title:'姓名',dataIndex:'userName'},{title:'年龄',dataIndex:'userAge'},{title:'性别',dataIndex:'ownerSexs'}
        ,{title:'电话号码',dataIndex:'userTelphone'},{title:'状态',dataIndex:'states',
        render: (states: any) => {
          return states=='启用'?<Badge color="green" text={states} />:<Badge color="gold" text={states} />;
        },}
        ,{title:'操作',
        render: (text:any, record:any) => (
          <>
            <Button type="link" onClick={async () => {
                await request.get('/api/Users/BanUsers?id='+text.id).then((response:any)=>{
                  message.success('编辑成功');
                  getData( 1, 5);
                  // console.log(response);
                })
              }} >
                {text.state==0?'禁用':'启用'}
            </Button>
          <Button type="link" onClick={() => {
                    setCurrentEditObject({
                      isModalVisible: true,
                      ...record
                    });
                  }} >
            编辑
          </Button>
          </>
        ),
      }]

      const [pagination, setPagination] = React.useState({//分页器
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '50', '200', '500'],
        showQuickJumper:true,
        defaultPageSize:5,
        showTotal:(total:any, current:any) => `共 ${total} 条记录  第 ${current[0]}~${current[1]}条`,
      });

      const userEditOnClose = async () => {
        getData( 1, 5);
      };

      const [dataSource, setDataSource] = React.useState<any[]>();//数据集合
      const getData=async (   
        pageValue: any,
        pageSizeValue: any                        
        ) => {
          await request.post('/api/Users/GetAllUsers',
          {role:1}).then((response:any)=>{
            if(response.code==200){
              const data=response.data.map((item:any,index:number)=>({
                key:index,
                "userName":item.userName,
                "userAge": item.userAge,
                "userSex": item.userSex,
                "userTelphone":item.userTelphone,
                "role":item.role,
                "account":item.account,
                "password": item.password,
                "state": item.state,
                "states": item.states,
                "roles": item.roles,
                "ownerSexs":item.ownerSexs,
                "repairss": item.repairss,
                "id":item.id
            }))
            console.log(response)
                const newPageObject = {
                  ...pagination,
                  current: pageValue,
                  pageSize: pageSizeValue,
                };
                setPagination(newPageObject);
                setDataSource(data)
                setspinning(false)
            }else{
              message.error(response.message)
              setspinning(false)
            }
            })
      }
    React.useEffect(()=>{
      getData( 1, 5);
    },[])
    const [spinning, setspinning] = useState(true);
    return (
      <Spin spinning={spinning} size="large">
        <>
            <Row style={{marginTop:30}} justify="center">
                <Col span={22}>
                <Form
                        className="ant-advanced-search-form"
                        form={formObject}
                        onFinish={async (values:any)=>{
                          setspinning(true)
                          await request.post('/api/Users/GetAllUsers',{role:1,state:values.state,userName:values.userName,userSex:values.userSex,userTelphone:values.userTelphone,account:values.account}).then((response:any)=>{
                            if(response.code==200){
                              const data=response.data.map((item:any,index:number)=>({
                                key:index,
                                "userName":item.userName,
                                "userAge": item.userAge,
                                "userSex": item.userSex,
                                "userTelphone":item.userTelphone,
                                "role":item.role,
                                "account":item.account,
                                "password": item.password,
                                "state": item.state,
                                "states": item.states,
                                "ownerSexs": item.ownerSexs,
                                "roles": item.roles,
                                "repairss": item.repairss,
                                "id":item.id

                              }))
                              // const newPageObject = {
                              //   ...pagination,
                              //   current: pageValue,
                              //   pageSize: pageSizeValue,
                              // };
                              // setPagination(newPageObject);
                              setDataSource(data)
                              setspinning(false)
                              message.success(response.message);
                            }else{
                              setspinning(false)
                              message.success(response.message);
                            }
                          })
                        }}
                        >
                          <Row gutter={24}>

                          <Col span={6}>
                          <Form.Item label="状态" name="state">
                              <Select placeholder='请选择'>
                                <Option value={0} key={0}>启用</Option>
                                <Option value={1} key={1}>禁用</Option>
                              </Select>
                            </Form.Item>
                          </Col>

                          <Col span={6}>
                          <Form.Item label="姓名" name="userName">
                            <Input placeholder="请录入" />
                            </Form.Item>
                          </Col>
                          <Col span={6}>
                          <Form.Item label="性别" name="userSex">
                              <Select placeholder='请选择'>
                                <Option value={0} key={0}>男</Option>
                                <Option value={1} key={1}>女</Option>
                              </Select>
                            </Form.Item>
                          </Col>
                          <Col span={6}>
                          <Form.Item label="电话号码" name="userTelphone">
                            <Input placeholder="请录入" />
                          </Form.Item>
                          </Col>
                          <Col span={6}>
                          <Form.Item label="账号" name="account">
                            <Input placeholder="请录入" />
                          </Form.Item>
                          </Col>
                          <Col span={6} >
                            <Button type="primary" htmlType="submit">
                              查询
                            </Button>
                            <Button
                              style={{ margin: '0 8px' }}
                              onClick={() => {
                                formObject.resetFields();
                              }}
                            >
                              重置
                            </Button>
                          </Col>
                          </Row>
                    </Form>
                </Col>
                <Col span={22} offset={1}>
                    <Button style={{ marginBottom: '10px' }} type="primary" onClick={() => {
                      setCurrentEditObject({
                        isModalVisible: true,
                      });
                    }}
                    >新增学生</Button>
                    <Table
                        columns={tableTitle}
                        dataSource={dataSource}
                        pagination={pagination}
                        // onChange={pageOnChange}//分页、排序、筛选变化时触发(用以重新获取数据)
                        tableLayout="fixed"
                        
                    />
                </Col>
            </Row>
            <Edit editObject={currentEditObject} onClose={userEditOnClose}></Edit>
        </>
        </Spin>
    )
}